<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Carbon  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset="utf-8">
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
    <script src="js/lunr.min.js" defer></script>
    <script src="js/typeahead.jquery.js" defer></script>
    <script src="js/jazzy.search.js" defer></script>
  </head>
  <body>


    <a title="Carbon  Reference"></a>

    <header class="header">
      <p class="header-col header-col--primary">
        <a class="header-link" href="index.html">
          Carbon Docs
        </a>
         (100% documented)
      </p>
    
      <p class="header-col--secondary">
        <form role="search" action="search.json">
          <input type="text" placeholder="Search documentation" data-typeahead>
        </form>
      </p>
    
        <p class="header-col header-col--secondary">
          <a class="header-link" href="https://github.com/ra1028/Carbon">
            <img class="header-icon" src="img/gh.png"/>
            View on GitHub
          </a>
        </p>
    
    </header>

    <p class="breadcrumbs">
      <a class="breadcrumb" href="index.html">Carbon Reference</a>
      <img class="carat" src="img/carat.png" />
      Carbon  Reference
    </p>

    <div class="content-wrapper">
      <nav class="navigation">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Element.html">Element</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/Component.html">Component</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/IdentifiableComponent.html">IdentifiableComponent</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/AnyComponent.html">AnyComponent</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/Section.html">Section</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/Group.html">Group</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="ComponentWrapper.html">ComponentWrapper</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/IdentifiedComponentWrapper.html">IdentifiedComponentWrapper</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/ComponentWrapping.html">ComponentWrapping</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Node.html">Node</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/CellNode.html">CellNode</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/ViewNode.html">ViewNode</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Renderer.html">Renderer</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/Renderer.html">Renderer</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Adapter.html">Adapter</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/Adapter.html">Adapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewAdapter.html">UITableViewAdapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewAdapter/CellRegistration.html">– CellRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewAdapter/ViewRegistration.html">– ViewRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewAdapter/SelectionContext.html">– SelectionContext</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewAdapter.html">UICollectionViewAdapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewAdapter/CellRegistration.html">– CellRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewAdapter/ViewRegistration.html">– ViewRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewAdapter/SelectionContext.html">– SelectionContext</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewFlowLayoutAdapter.html">UICollectionViewFlowLayoutAdapter</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Updater.html">Updater</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/Updater.html">Updater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewUpdater.html">UITableViewUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewReloadDataUpdater.html">UITableViewReloadDataUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewUpdater.html">UICollectionViewUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewReloadDataUpdater.html">UICollectionViewReloadDataUpdater</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Interface.html">Interface</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/ComponentRenderable.html">ComponentRenderable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewComponentCell.html">UITableViewComponentCell</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UITableViewComponentHeaderFooterView.html">UITableViewComponentHeaderFooterView</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionViewComponentCell.html">UICollectionViewComponentCell</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Classes/UICollectionComponentReusableView.html">UICollectionComponentReusableView</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Builder.html">Builder</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/CellsBuilder.html">CellsBuilder</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Structs/SectionsBuilder.html">SectionsBuilder</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/CellsBuildable.html">CellsBuildable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Protocols/SectionsBuildable.html">SectionsBuildable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Extensions/Optional.html">Optional</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="Changeset.html">Changeset</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Changeset.html#/s:6Carbon13DataChangeseta">DataChangeset</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="Changeset.html#/s:6Carbon19StagedDataChangeseta">StagedDataChangeset</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">

        <section class="section">
          <div class="section-content">
            
            <p align="center">
<img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/logo/png/logo_carbon_bnr3_white.png" width=700>
</p>

<H4 align="center">
A declarative library for building component-based user interfaces</br>
in UITableView and UICollectionView.</br>
</H4>

<table><thead>
<tr>
<th style="text-align: left">Declarative</th>
<th style="text-align: left">Component-Based</th>
<th style="text-align: left">Non-Destructive</th>
</tr>
</thead><tbody>
<tr>
<td style="text-align: left">Provides a declarative design with power of diffing algorithm for building list UIs.</td>
<td style="text-align: left">Declare component once, it can be reused regardless kind of the list element.</td>
<td style="text-align: left">Solves the various problems by architecture and algorithm without destructing UIKit.</td>
</tr>
</tbody></table>

<p><br></p>

<p align="center">
<a href="https://github.com/ra1028/Carbon/releases/latest"><img alt="Release" src="https://img.shields.io/github/release/ra1028/Carbon.svg"/></a>
<a href="https://cocoapods.org/pods/Carbon"><img alt="CocoaPods" src="https://img.shields.io/cocoapods/v/Carbon.svg"/></a>
<a href="https://github.com/Carthage/Carthage"><img alt="Carthage" src="https://img.shields.io/badge/carthage-compatible-yellow.svg"/></a>
</br>
<a href="https://github.com/ra1028/Carbon/actions"><img alt="CI Status" src="https://github.com/ra1028/Carbon/workflows/GitHub%20Actions/badge.svg"/></a>
<a href="https://developer.apple.com/swift"><img alt="Swift 5.1" src="https://img.shields.io/badge/language-Swift 5.1-orange.svg"/></a>
<a href="https://developer.apple.com/"><img alt="Platform" src="https://img.shields.io/badge/platform-iOS-green.svg"/></a>
<a href="https://github.com/ra1028/Carbon/blob/master/LICENSE"><img alt="Lincense" src="https://img.shields.io/badge/License-Apache%202.0-black.svg"/></a>
</p>

<hr>
<h2 id='introduction' class='heading'>Introduction</h2>

<p>Carbon is a library for building component-based user interfaces in UITableView and UICollectionView inspired by <a href="https://developer.apple.com/xcode/swiftui">SwiftUI</a> and <a href="https://reactjs.org">React</a>.<br>
This make it painless to build and maintain the complex UIs.<br>
Since components made with <code>Carbon</code> can be works directly on <code>SwiftUI</code>, the cost of future migration can be greatly reduced.  </p>

<p>Uses <a href="https://github.com/ra1028/DifferenceKit">DifferenceKit</a> which is highly optimized based on Paul Heckel&rsquo;s paper for diffing.<br>
Declarative design and diffing algorithm make your code more predictable, debugging easier and providing beautiful animations to users.  </p>

<p>Our goal is similar to <a href="https://github.com/Instagram/IGListKit">Instagram/IGListKit</a> and <a href="https://github.com/airbnb/epoxy">airbnb/Epoxy</a>, we respect those library as pioneers.  </p>

<hr>
<h2 id='examples' class='heading'>Examples</h2>

<table><thead>
<tr>
<th style="text-align: center"><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/pangram.gif" alt="Pangram"></th>
<th style="text-align: center"><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/kyoto.gif" alt="Kyoto"></th>
<th style="text-align: center"><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/emoji.gif" alt="Emoji"></th>
<th style="text-align: center"><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/todo.gif" alt="Todo"></th>
<th style="text-align: center"><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/form.gif" alt="Form"></th>
</tr>
</thead><tbody>
</tbody></table>

<hr>

<p><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/hello.png" height=240 align=right></p>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="n">render</span> <span class="p">{</span>
    <span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)</span>
        <span class="o">.</span><span class="nf">identified</span><span class="p">(</span><span class="nv">by</span><span class="p">:</span> <span class="p">\</span><span class="o">.</span><span class="n">title</span><span class="p">)</span>

    <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Vincent"</span><span class="p">)</span>
    <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">)</span>
    <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Mia"</span><span class="p">)</span>

    <span class="kt">Footer</span><span class="p">(</span><span class="s">"👋 Greeting from Carbon"</span><span class="p">)</span>
        <span class="o">.</span><span class="nf">identified</span><span class="p">(</span><span class="nv">by</span><span class="p">:</span> <span class="p">\</span><span class="o">.</span><span class="n">text</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>

<hr>
<h3 id='a-href-https-github-com-ra1028-carbon-swiftui-compatibility-1-swiftui-compatibility-a' class='heading'><a href="https://github.com/ra1028/Carbon#swiftui-compatibility-1">SwiftUI Compatibility</a></h3>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">ContentView</span><span class="p">:</span> <span class="kt">View</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
        <span class="kt">ScrollView</span> <span class="p">{</span>
            <span class="kt">VStack</span> <span class="p">{</span>
                <span class="kt">Text</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)</span>
                    <span class="o">.</span><span class="nf">font</span><span class="p">(</span><span class="o">.</span><span class="n">title</span><span class="p">)</span>
                    <span class="o">.</span><span class="nf">padding</span><span class="p">(</span><span class="o">.</span><span class="n">horizontal</span><span class="p">,</span> <span class="mi">16</span><span class="p">)</span>

                <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"World"</span><span class="p">)</span>
                    <span class="o">.</span><span class="nf">frame</span><span class="p">(</span><span class="nv">height</span><span class="p">:</span> <span class="mi">60</span><span class="p">)</span>
                    <span class="o">.</span><span class="nf">background</span><span class="p">(</span><span class="kt">Color</span><span class="o">.</span><span class="n">red</span><span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<hr>
<h2 id='getting-started' class='heading'>Getting Started</h2>

<ul>
<li><a href="https://ra1028.github.io/Carbon">API Documentation</a></li>
<li><a href="https://github.com/ra1028/Carbon/tree/master/Examples">Example Apps</a></li>
<li><a href="https://github.com/ra1028/Carbon/blob/master/Carbon.playground/Contents.swift">Playground</a></li>
</ul>
<h3 id='build-for-development' class='heading'>Build for Development</h3>
<pre class="highlight shell"><code><span class="nv">$ </span>git clone https://github.com/ra1028/Carbon.git
<span class="nv">$ </span><span class="nb">cd </span>Carbon/
<span class="nv">$ </span>make setup
<span class="nv">$ </span>open Carbon.xcworkspace
</code></pre>

<hr>
<h2 id='basic-usage' class='heading'>Basic Usage</h2>

<p>Described here are the fundamentals for building list UIs with Carbon.<br>
<a href="https://ra1028.github.io/Carbon">The API document</a> will help you understand the details of each type.<br>
For more advanced usage, see the <a href="https://github.com/ra1028/Carbon#advanced-guide">Advanced Guide</a>.<br>
And the more practical examples are <a href="https://github.com/ra1028/Carbon/tree/master/Examples">here</a>.  </p>
<h3 id='component' class='heading'>Component</h3>

<p><code><a href="Protocols/Component.html">Component</a></code> is the base unit of the UI in Carbon.<br>
All elements are made up of components, and it can be animated by diffing update.  </p>

<p><code>UIView</code>, <code>UIViewController</code> and its subclasses are available as <code>content</code> of component by default.<br>
You can declare fixed size component by implementing <code>referenceSize(in bounds: CGRect) -&gt; CGSize?</code>. The default is to return nil and falls back to a value such as <code>UITableView.rowHeight</code> or <code>UICollectionViewFlowLayout.itemSize</code>.<br>
See <a href="https://github.com/ra1028/Carbon#component-in-depth">here</a> for more depth of component.</p>

<p>Definition below is the simplest implementation.  </p>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">HelloMessage</span><span class="p">:</span> <span class="kt">Component</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">name</span><span class="p">:</span> <span class="kt">String</span>

    <span class="kd">func</span> <span class="nf">renderContent</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="kt">UILabel</span> <span class="p">{</span>
        <span class="kt">UILabel</span><span class="p">()</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">render</span><span class="p">(</span><span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">content</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="s">"Hello </span><span class="se">\(</span><span class="n">name</span><span class="se">)</span><span class="s">"</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>Component used as a cell requires to specify an arbitrary <code>id</code>.<br>
Give an <code>id</code> by <code><a href="Protocols/Component.html#/s:6Carbon9ComponentPAAE10identified2byAA010IdentifiedB7WrapperVyqd__xGqd___tSHRd__lF">Component.identified(by:)</a></code> or declare it by using <a href="https://github.com/ra1028/Carbon#identifiablecomponent"><code><a href="Protocols/IdentifiableComponent.html">IdentifiableComponent</a></code></a> protocol.</p>
<h3 id='renderer' class='heading'>Renderer</h3>

<p>The components are displayed on the list UI by <code>Renderer.render</code>.<br>
Boilerplates such as registering element types to a table view are no longer needed in Carbon.  </p>

<p>The adapter acts as delegate and dataSource, the updater handles updates.<br>
You can also change the behaviors by inheriting and customizing it.<br>
There are also <code><a href="Classes/UITableViewReloadDataUpdater.html">UITableViewReloadDataUpdater</a></code> and <code><a href="Classes/UICollectionViewReloadDataUpdater.html">UICollectionViewReloadDataUpdater</a></code> which update by <code>reloadData</code> without diffing updates.  </p>

<p>When <code>render</code> called again, the updater calculates the diff from the currently rendered components and updates them with the system animation.  </p>

<p>Renderer for UITableView:</p>
<pre class="highlight swift"><code><span class="kd">@IBOutlet</span> <span class="k">var</span> <span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="o">!</span>

<span class="k">let</span> <span class="nv">renderer</span> <span class="o">=</span> <span class="kt">Renderer</span><span class="p">(</span>
    <span class="nv">adapter</span><span class="p">:</span> <span class="kt">UITableViewAdapter</span><span class="p">(),</span>
    <span class="nv">updater</span><span class="p">:</span> <span class="kt">UITableViewUpdater</span><span class="p">()</span>
<span class="p">)</span>

<span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLoad</span><span class="p">()</span>

    <span class="n">renderer</span><span class="o">.</span><span class="n">target</span> <span class="o">=</span> <span class="n">tableView</span>
<span class="p">}</span>
</code></pre>

<p>Renderer for UICollectionView:</p>
<pre class="highlight swift"><code><span class="kd">@IBOutlet</span> <span class="k">var</span> <span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="o">!</span>

<span class="k">let</span> <span class="nv">renderer</span> <span class="o">=</span> <span class="kt">Renderer</span><span class="p">(</span>
    <span class="nv">adapter</span><span class="p">:</span> <span class="kt">UICollectionViewFlowLayoutAdapter</span><span class="p">(),</span>
    <span class="nv">updater</span><span class="p">:</span> <span class="kt">UICollectionViewUpdater</span><span class="p">()</span>
<span class="p">)</span>

<span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLoad</span><span class="p">()</span>

    <span class="n">renderer</span><span class="o">.</span><span class="n">target</span> <span class="o">=</span> <span class="n">collectionView</span>
<span class="p">}</span>
</code></pre>

<p>Render Components:</p>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="n">render</span> <span class="p">{</span>
    <span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)</span>
        <span class="o">.</span><span class="nf">identified</span><span class="p">(</span><span class="nv">by</span><span class="p">:</span> <span class="p">\</span><span class="o">.</span><span class="n">title</span><span class="p">)</span>

    <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Butch"</span><span class="p">)</span>
    <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Fabianne"</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>
<h3 id='section' class='heading'>Section</h3>

<p>A section can include header, footer and cells.<br>
This also needs to specify <code>id</code> for identify from among multiple sections.<br>
The cells can be declared using a function builder as below:</p>
<pre class="highlight swift"><code><span class="k">let</span> <span class="nv">appearsBottomSection</span><span class="p">:</span> <span class="kt">Bool</span> <span class="o">=</span> <span class="o">...</span>
<span class="k">let</span> <span class="nv">appearsFourthMan</span><span class="p">:</span> <span class="kt">Bool</span> <span class="o">=</span> <span class="o">...</span>

<span class="n">renderer</span><span class="o">.</span><span class="n">render</span> <span class="p">{</span>
    <span class="kt">Section</span><span class="p">(</span>
        <span class="nv">id</span><span class="p">:</span> <span class="s">"Bottom"</span><span class="p">,</span>
        <span class="nv">header</span><span class="p">:</span> <span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">),</span>
        <span class="nv">footer</span><span class="p">:</span> <span class="kt">Footer</span><span class="p">(</span><span class="s">"👋 Greeting from Carbon"</span><span class="p">),</span>
        <span class="nv">cells</span><span class="p">:</span> <span class="p">{</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Marsellus"</span><span class="p">)</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"The Wolf"</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">)</span>

    <span class="k">if</span> <span class="n">appearsBottomSection</span> <span class="p">{</span>
        <span class="kt">Section</span><span class="p">(</span><span class="nv">id</span><span class="p">:</span> <span class="s">"Top"</span><span class="p">)</span> <span class="p">{</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Brett"</span><span class="p">)</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Roger"</span><span class="p">)</span>

            <span class="k">if</span> <span class="n">appearsFourthMan</span> <span class="p">{</span>
                <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Fourth Man"</span><span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id='group' class='heading'>Group</h3>

<p>The number of limit to declare cells or section with function builder syntax is until <code>10</code>. You can avoid that limitation by grouping with <code><a href="Structs/Group.html">Group</a></code>.<br>
It can also be used to create a cell or section from an array with N elements.  </p>

<p>Group of Components:</p>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="n">render</span> <span class="p">{</span>
    <span class="kt">Group</span> <span class="p">{</span>
        <span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)</span>
            <span class="o">.</span><span class="nf">identified</span><span class="p">(</span><span class="nv">by</span><span class="p">:</span> <span class="p">\</span><span class="o">.</span><span class="n">title</span><span class="p">)</span>

        <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Vincent"</span><span class="p">)</span>
        <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">)</span>
    <span class="p">}</span>

    <span class="kt">Group</span><span class="p">(</span><span class="nv">of</span><span class="p">:</span> <span class="p">[</span><span class="s">"Pumpkin"</span><span class="p">,</span> <span class="s">"Honey Bunny"</span><span class="p">])</span> <span class="p">{</span> <span class="n">name</span> <span class="k">in</span>
        <span class="kt">HelloMessage</span><span class="p">(</span><span class="n">name</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>Group of Sections:</p>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="n">render</span> <span class="p">{</span>
    <span class="kt">Group</span> <span class="p">{</span>
        <span class="kt">Section</span><span class="p">(</span><span class="nv">id</span><span class="p">:</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jimmie"</span><span class="p">)</span>
        <span class="p">}</span>

        <span class="kt">Section</span><span class="p">(</span><span class="nv">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Bonnie"</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="kt">Group</span><span class="p">(</span><span class="nv">of</span><span class="p">:</span> <span class="p">[</span><span class="s">"Lance"</span><span class="p">,</span> <span class="s">"Jody"</span><span class="p">])</span> <span class="p">{</span> <span class="n">name</span> <span class="k">in</span>
        <span class="kt">Section</span><span class="p">(</span><span class="nv">id</span><span class="p">:</span> <span class="n">name</span><span class="p">)</span> <span class="p">{</span>
            <span class="kt">HelloMessage</span><span class="p">(</span><span class="n">name</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<H3 align="center">
<a href="https://ra1028.github.io/Carbon">[See More Usage]</a>
<a href="https://github.com/ra1028/Carbon/tree/master/Examples/Example-iOS">[See Example App]</a>
</H3>

<hr>
<h2 id='advanced-guide' class='heading'>Advanced Guide</h2>
<h3 id='custom-content' class='heading'>Custom Content</h3>

<p>Of course, the content of component can use custom class. You can also instantiate it from Xib.<br>
It can be inherited whichever class, but the common means is inherit <code>UIView</code> or <code>UIViewController</code>.  </p>

<p><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/content-xib.png" height=90 align=right></p>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">HelloMessageContent</span><span class="p">:</span> <span class="kt">UIView</span> <span class="p">{</span>
    <span class="kd">@IBOutlet</span> <span class="k">var</span> <span class="nv">label</span><span class="p">:</span> <span class="kt">UILabel</span><span class="o">!</span>
<span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">HelloMessage</span><span class="p">:</span> <span class="kt">Component</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">name</span><span class="p">:</span> <span class="kt">String</span>

    <span class="kd">func</span> <span class="nf">renderContent</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="kt">HelloMessageContent</span> <span class="p">{</span>
        <span class="kt">HelloMessageContent</span><span class="o">.</span><span class="nf">loadFromNib</span><span class="p">()</span>  <span class="c1">// Extension for instantiate from Xib. Not in Carbon.</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">render</span><span class="p">(</span><span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt">HelloMessageContent</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">content</span><span class="o">.</span><span class="n">label</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="s">"Hello </span><span class="se">\(</span><span class="n">name</span><span class="se">)</span><span class="s">"</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id='identifiablecomponent' class='heading'>IdentifiableComponent</h3>

<p><code><a href="Protocols/IdentifiableComponent.html">IdentifiableComponent</a></code> is a component that simply can predefine an identifier.<br>
It can be omitted the definition of <code>id</code> if the component conforms to <code>Hashable</code>.  </p>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">HelloMessage</span><span class="p">:</span> <span class="kt">IdentifiableComponent</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">name</span><span class="p">:</span> <span class="kt">String</span>

    <span class="k">var</span> <span class="nv">id</span><span class="p">:</span> <span class="kt">String</span> <span class="p">{</span>
        <span class="n">name</span>
    <span class="p">}</span>

    <span class="o">...</span>
</code></pre>
<h3 id='swiftui-compatibility' class='heading'>SwiftUI Compatibility</h3>

<p>Components made with <code>Carbon</code> are compatible with <code>SwiftUI</code>.<br>
The component can easily works as SwiftUI by composing with <code>View</code> protocol.<br>
Currently SwiftUI doesn&rsquo;t support self-sizing, so can use <code>UIView.intrinsicContentSize</code> or specify the height explicitly by <code><a href="Protocols/Component.html#/s:6Carbon9ComponentP13referenceSize2inSo6CGSizeVSgSo6CGRectV_tF">Component.referenceSize(in:)</a></code> or <code>View.frame(height:)</code>.  </p>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">HelloMessage</span><span class="p">:</span> <span class="kt">Component</span><span class="p">,</span> <span class="kt">View</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">ContentView</span><span class="p">:</span> <span class="kt">View</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
        <span class="kt">VStack</span><span class="p">(</span><span class="nv">alignment</span><span class="p">:</span> <span class="o">.</span><span class="n">leading</span><span class="p">)</span> <span class="p">{</span>
            <span class="kt">Text</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)</span>

            <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"World"</span><span class="p">)</span>
                <span class="o">.</span><span class="nf">frame</span><span class="p">(</span><span class="nv">height</span><span class="p">:</span> <span class="mi">60</span><span class="p">)</span>

            <span class="kt">Spacer</span><span class="p">()</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id='component-in-depth' class='heading'>Component in-Depth</h3>

<p>Components can define more detailed behaviors.<br>
Following are part of it.  </p>

<ul>
<li><p><strong>shouldContentUpdate(with next: Self) -&gt; Bool</strong><br>
If the result is <code>true</code>, the component displayed as a cell is reloaded individually, header or footer is reloaded with entire section.<br>
By default it returns <code>false</code>, but the updater will always re-render visible components changed.  </p></li>
<li><p><strong>referenceSize(in bounds: CGRect) -&gt; CGSize?</strong><br>
Defining the size of component on the list UI.<br>
You can use default value such as <code>UITableView.rowHeight</code> or <code>UICollectionViewLayout.itemSize</code> by returning <code>nil</code>.<br>
Returns <code>nil</code> by default.  </p></li>
<li><p><strong>shouldRender(next: Self, in content: Content) -&gt; Bool</strong><br>
By returning <code>false</code>, you can skip component re-rendering when reloading or dequeuing element.<br>
Instead of re-rendering, detects component changes by comparing with next value.<br>
This is recommended to use only for performance tuning.  </p></li>
<li><p><strong>contentWillDisplay(_ content: Content)</strong><br>
Invoked every time of before a component got into visible area.  </p></li>
<li><p><strong>contentDidEndDisplay(_ content: Content)</strong><br>
Invoked every time of after a component went out from visible area.  </p></li>
</ul>

<p><a href="https://ra1028.github.io/Carbon/Protocols/Component.html">See more</a></p>
<h3 id='selection' class='heading'>Selection</h3>

<p>Cell selection can be handled by setting <code>didSelect</code> to the instance of <code><a href="Classes/UITableViewAdapter.html">UITableViewAdapter</a></code> or <code><a href="Classes/UICollectionViewAdapter.html">UICollectionViewAdapter</a></code>.  </p>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="n">adapter</span><span class="o">.</span><span class="n">didSelect</span> <span class="p">{</span> <span class="n">context</span> <span class="k">in</span>
    <span class="nf">print</span><span class="p">(</span><span class="n">context</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>

<p>However, we recommend to make the <code>Content</code> of the component to the class inherited from <code>UIControl</code>.<br>
It&rsquo;s more maintainable and extensible.  </p>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">MenuItemContent</span><span class="p">:</span> <span class="kt">UIControl</span> <span class="p">{</span>
    <span class="kd">@IBOutlet</span> <span class="k">var</span> <span class="nv">label</span><span class="p">:</span> <span class="kt">UILabel</span><span class="o">!</span>

    <span class="k">var</span> <span class="nv">onSelect</span><span class="p">:</span> <span class="p">(()</span> <span class="o">-&gt;</span> <span class="kt">Void</span><span class="p">)?</span>

    <span class="kd">@objc</span> <span class="kd">func</span> <span class="nf">handleSelect</span><span class="p">()</span> <span class="p">{</span>
        <span class="nf">onSelect</span><span class="p">?()</span>
    <span class="p">}</span>

    <span class="k">override</span> <span class="kd">func</span> <span class="nf">awakeFromNib</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">super</span><span class="o">.</span><span class="nf">awakeFromNib</span><span class="p">()</span>
        <span class="nf">addTarget</span><span class="p">(</span><span class="k">self</span><span class="p">,</span> <span class="nv">action</span><span class="p">:</span> <span class="kd">#selector(</span><span class="nf">handleSelect</span><span class="kd">)</span><span class="p">,</span> <span class="nv">for</span><span class="p">:</span> <span class="o">.</span><span class="n">touchUpInside</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">MenuItem</span><span class="p">:</span> <span class="kt">Component</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">text</span><span class="p">:</span> <span class="kt">String</span>
    <span class="k">var</span> <span class="nv">onSelect</span><span class="p">:</span> <span class="p">()</span> <span class="o">-&gt;</span> <span class="kt">Void</span>

    <span class="kd">func</span> <span class="nf">renderContent</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="kt">MenuItemContent</span> <span class="p">{</span>
        <span class="kt">MenuItemContent</span><span class="o">.</span><span class="nf">loadFromNib</span><span class="p">()</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">render</span><span class="p">(</span><span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt">MenuItemContent</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">content</span><span class="o">.</span><span class="n">label</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">text</span>
        <span class="n">content</span><span class="o">.</span><span class="n">onSelect</span> <span class="o">=</span> <span class="n">onSelect</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>In this way, in order to cancel the selection by scrolling, you need to implement the following extension.  </p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">UITableView</span> <span class="p">{</span>
    <span class="kd">open</span> <span class="k">override</span> <span class="kd">func</span> <span class="nf">touchesShouldCancel</span><span class="p">(</span><span class="k">in</span> <span class="nv">view</span><span class="p">:</span> <span class="kt">UIView</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Bool</span> <span class="p">{</span>
        <span class="kc">true</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">extension</span> <span class="kt">UICollectionView</span> <span class="p">{</span>
    <span class="kd">open</span> <span class="k">override</span> <span class="kd">func</span> <span class="nf">touchesShouldCancel</span><span class="p">(</span><span class="k">in</span> <span class="nv">view</span><span class="p">:</span> <span class="kt">UIView</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Bool</span> <span class="p">{</span>
        <span class="kc">true</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id='adapter-customization' class='heading'>Adapter Customization</h3>

<p>You can add methods of <code>delegate</code>, <code>dataSource</code> by subclassing each adapter.  </p>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">CustomTableViewdapter</span><span class="p">:</span> <span class="kt">UITableViewAdapter</span> <span class="p">{</span>
    <span class="kd">func</span> <span class="nf">tableView</span><span class="p">(</span><span class="n">_</span> <span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="n">titleForHeaderInSection</span> <span class="nv">section</span><span class="p">:</span> <span class="kt">Int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">String</span><span class="p">?</span> <span class="p">{</span>
        <span class="s">"Header title for section</span><span class="se">\(</span><span class="n">section</span><span class="se">)</span><span class="s">"</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="k">let</span> <span class="nv">renderer</span> <span class="o">=</span> <span class="kt">Renderer</span><span class="p">(</span>
    <span class="nv">adapter</span><span class="p">:</span> <span class="kt">CustomTableViewAdapter</span><span class="p">(),</span>
    <span class="nv">updater</span><span class="p">:</span> <span class="kt">UITableViewUpdater</span><span class="p">()</span>
<span class="p">)</span>
</code></pre>

<p>Furthermore, it can be customized the class of the elements(cell/header/footer) which becomes the container of components by overriding some methods in adapter as following.<br>
You can also use <code>xib</code> by giving nib as parameter of init of the return value Registration.  </p>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">CustomTableViewAdapter</span><span class="p">:</span> <span class="kt">UITableViewAdapter</span> <span class="p">{</span>
    <span class="c1">// Use custom cell.</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">cellRegistration</span><span class="p">(</span><span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">,</span> <span class="nv">node</span><span class="p">:</span> <span class="kt">CellNode</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">CellRegistration</span> <span class="p">{</span>
        <span class="kt">CellRegistration</span><span class="p">(</span><span class="nv">class</span><span class="p">:</span> <span class="kt">CustomTableViewCell</span><span class="o">.</span><span class="k">self</span><span class="p">)</span>
    <span class="p">}</span>

    <span class="c1">// Use custom header view.</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">headerViewRegistration</span><span class="p">(</span><span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="nv">section</span><span class="p">:</span> <span class="kt">Int</span><span class="p">,</span> <span class="nv">node</span><span class="p">:</span> <span class="kt">ViewNode</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">ViewRegistration</span> <span class="p">{</span>
        <span class="kt">ViewRegistration</span><span class="p">(</span><span class="nv">class</span><span class="p">:</span> <span class="kt">CustomTableViewHeaderFooterView</span><span class="o">.</span><span class="k">self</span><span class="p">)</span>
    <span class="p">}</span>

    <span class="c1">// Use custom footer view.</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">footerViewRegistration</span><span class="p">(</span><span class="nv">tableView</span><span class="p">:</span> <span class="kt">UITableView</span><span class="p">,</span> <span class="nv">section</span><span class="p">:</span> <span class="kt">Int</span><span class="p">,</span> <span class="nv">node</span><span class="p">:</span> <span class="kt">ViewNode</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">ViewRegistration</span> <span class="p">{</span>
        <span class="kt">ViewRegistration</span><span class="p">(</span><span class="nv">class</span><span class="p">:</span> <span class="kt">CustomTableViewHeaderFooterView</span><span class="o">.</span><span class="k">self</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>In UICollectionViewAdapter, you can select the node corresponding to a certain kind.  </p>
<pre class="highlight swift"><code><span class="kd">class</span> <span class="kt">CustomCollectionViewAdapter</span><span class="p">:</span> <span class="kt">UICollectionViewAdapter</span> <span class="p">{</span>
    <span class="k">override</span> <span class="kd">func</span> <span class="nf">supplementaryViewNode</span><span class="p">(</span><span class="n">forElementKind</span> <span class="nv">kind</span><span class="p">:</span> <span class="kt">String</span><span class="p">,</span> <span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">at</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">IndexPath</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">ViewNode</span><span class="p">?</span> <span class="p">{</span>
        <span class="k">switch</span> <span class="n">kind</span> <span class="p">{</span>
        <span class="k">case</span> <span class="s">"CustomSupplementaryViewKindSectionHeader"</span><span class="p">:</span>
            <span class="k">return</span> <span class="nf">headerNode</span><span class="p">(</span><span class="nv">in</span><span class="p">:</span> <span class="n">indexPath</span><span class="o">.</span><span class="n">section</span><span class="p">)</span>

        <span class="k">default</span><span class="p">:</span>
            <span class="k">return</span> <span class="k">super</span><span class="o">.</span><span class="nf">supplementaryViewNode</span><span class="p">(</span><span class="nv">forElementKind</span><span class="p">:</span> <span class="n">kind</span><span class="p">,</span> <span class="nv">collectionView</span><span class="p">:</span> <span class="n">collectionView</span><span class="p">,</span> <span class="nv">at</span><span class="p">:</span> <span class="n">indexPath</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p><a href="https://ra1028.github.io/Carbon/Adapter.html">See more</a></p>
<h3 id='updater-customization' class='heading'>Updater Customization</h3>

<p>It can be modify the updating behavior of the list UI by inheriting <code><a href="Protocols/Updater.html">Updater</a></code>.<br>
This is important thing to make Carbon well adapted to your project.<br>
Below are some of the default provided settings of <code>updater</code>.  </p>

<ul>
<li><p><strong>isAnimationEnabled</strong><br>
Indicating whether enables animation for diffing updates, setting <code>false</code> will perform it using <code>UIView.performWithoutAnimation</code>.<br>
Default is <code>true</code>.  </p></li>
<li><p><strong>isAnimationEnabledWhileScrolling</strong><br>
Indicating whether enables animation for diffing updates while target is scrolling, setting <code>false</code> will perform it  using <code>UIView.performWithoutAnimation</code>.<br>
Default is <code>false</code>.  </p></li>
<li><p><strong>animatableChangeCount</strong><br>
The max number of changes to perform diffing updates. It falls back to <code>reloadData</code> if it exceeded.<br>
Default is <code>300</code>.  </p></li>
<li><p><strong>keepsContentOffset</strong><br>
Indicating whether that to reset content offset after updated.<br>
The content offset become unintended position after diffing updates in some case.
If set <code>true</code>, revert content offset after updates.<br>
Default is <code>true</code>.  </p></li>
</ul>

<p><a href="https://ra1028.github.io/Carbon/Updater.html">See more</a></p>
<h3 id='without-functionbuilder-syntax' class='heading'>Without FunctionBuilder Syntax</h3>

<p>Carbon can also build a UI with declarative syntax without function builder as following.  </p>

<ul>
<li><strong>ViewNode</strong></li>
</ul>

<p>This is a node representing header or footer. The node is wrap an instance of type conforming to <code><a href="Protocols/Component.html">Component</a></code> protocol.  </p>
<pre class="highlight swift"><code><span class="kt">ViewNode</span><span class="p">(</span><span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">))</span>
</code></pre>

<ul>
<li><strong>CellNode</strong></li>
</ul>

<p><code><a href="Structs/CellNode.html">CellNode</a></code> is a node representing cell.<br>
Unlike in the ViewNode, this needs an <code>id</code> which <code>Hashable</code> type to identify from among a lot of cells.<br>
The <code>id</code> is used to find the same component in the list data before and after changed.  </p>
<pre class="highlight swift"><code><span class="kt">CellNode</span><span class="p">(</span><span class="nv">id</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">))</span>
<span class="kt">CellNode</span><span class="p">(</span><span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">)</span><span class="o">.</span><span class="nf">identified</span><span class="p">(</span><span class="nv">by</span><span class="p">:</span> <span class="p">\</span><span class="o">.</span><span class="n">name</span><span class="p">))</span>
<span class="kt">CellNode</span><span class="p">(</span><span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">))</span>  <span class="c1">// Using `IdentifiableComponent`.</span>
</code></pre>

<ul>
<li><strong>Section</strong> and render</li>
</ul>
<pre class="highlight swift"><code><span class="n">renderer</span><span class="o">.</span><span class="nf">render</span><span class="p">(</span>
    <span class="kt">Section</span><span class="p">(</span>
        <span class="nv">id</span><span class="p">:</span> <span class="s">"Section"</span><span class="p">,</span>
        <span class="nv">header</span><span class="p">:</span> <span class="kt">ViewNode</span><span class="p">(</span><span class="kt">Header</span><span class="p">(</span><span class="s">"GREET"</span><span class="p">)),</span>
        <span class="nv">cells</span><span class="p">:</span> <span class="p">[</span>
            <span class="kt">CellNode</span><span class="p">(</span><span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Vincent"</span><span class="p">)),</span>
            <span class="kt">CellNode</span><span class="p">(</span><span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Mia"</span><span class="p">)),</span>
            <span class="kt">CellNode</span><span class="p">(</span><span class="kt">HelloMessage</span><span class="p">(</span><span class="s">"Jules"</span><span class="p">))</span>
        <span class="p">],</span>
        <span class="nv">footer</span><span class="p">:</span> <span class="kt">ViewNode</span><span class="p">(</span><span class="kt">Footer</span><span class="p">(</span><span class="s">"👋 Greeting from Carbon"</span><span class="p">))</span>
    <span class="p">)</span>
<span class="p">)</span>
</code></pre>

<p><a href="https://ra1028.github.io/Carbon/Node.html">See more</a></p>

<hr>
<h2 id='requirements' class='heading'>Requirements</h2>

<ul>
<li>Swift 5.1+</li>
<li>Xcode 11.0+</li>
</ul>

<hr>
<h2 id='installation' class='heading'>Installation</h2>
<h3 id='a-href-https-cocoapods-org-cocoapods-a' class='heading'><a href="https://cocoapods.org">CocoaPods</a></h3>

<p>Add the following to your <code>Podfile</code>:</p>
<pre class="highlight ruby"><code><span class="n">pod</span> <span class="s1">'Carbon'</span>
</code></pre>
<h3 id='a-href-https-github-com-carthage-carthage-carthage-a' class='heading'><a href="https://github.com/Carthage/Carthage">Carthage</a></h3>

<p>Add the following to your <code>Cartfile</code>:</p>
<pre class="highlight plaintext"><code>github "ra1028/Carbon"
</code></pre>
<h3 id='a-href-https-developer-apple-com-documentation-xcode-adding_package_dependencies_to_your_app-swift-package-manager-a' class='heading'><a href="https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app">Swift Package Manager</a></h3>

<p>Select Xcode menu <code>File &gt; Swift Packages &gt; Add Package Dependency...</code> and enter repository URL with GUI.</p>
<pre class="highlight plaintext"><code>Repository: https://github.com/ra1028/Carbon
</code></pre>

<hr>
<h2 id='contributing' class='heading'>Contributing</h2>

<p>Pull requests, bug reports and feature requests are welcome 🚀<br>
Please see the <a href="https://github.com/ra1028/Carbon/blob/master/CONTRIBUTING.md">CONTRIBUTING</a> file for learn how to contribute to Carbon.  </p>

<hr>
<h2 id='respect' class='heading'>Respect</h2>

<p>Libraries for list UIs using diffing algorithm that I have sincerely ❤️ and respected.  </p>

<ul>
<li><a href="https://github.com/facebook/react/">React</a> (by <a href="https://github.com/facebook">Facebook</a>)<br>
I have very inspired about paradigm and API design.<br></li>
<li><a href="https://github.com/Instagram/IGListKit">IGListKit</a> (by <a href="https://github.com/Instagram">Instagram</a>)<br>
The most popular library among list UI libraries using diffing algorithm in iOS.<br></li>
<li><a href="https://github.com/airbnb/epoxy">Epoxy</a> (by <a href="https://github.com/airbnb">Airbnb</a>)<br>
The most popular library among list UI libraries using diffing algorithm in Android.<br></li>
<li><a href="https://github.com/RxSwiftCommunity/RxDataSources">RxDataSources</a> (by <a href="https://github.com/kzaher">@kzaher</a>, <a href="https://github.com/RxSwiftCommunity">RxSwift Community</a>)<br>
A great library that can complex diffing update by very fast algorithms.<br></li>
<li><a href="https://github.com/TextureGroup/Texture">Texture</a> (by <a href="https://github.com/TextureGroup">TextureGroup</a>, <a href="https://github.com/facebook">Facebook</a>, <a href="https://github.com/pinterest">Pinterest</a>)<br>
The one and only library for creating list UIs that pursues rendering performance.<br></li>
<li><a href="https://github.com/Babylonpartners/Bento">Bento</a> (by <a href="https://github.com/Babylonpartners">Babylon Health</a>)<br>
Bento is an awesome declarative library that has an API design which follows React.<br></li>
<li><a href="https://github.com/plangrid/ReactiveLists">ReactiveLists</a> (by <a href="https://github.com/plangrid">PlanGrid</a>)<br>
Uses DifferenceKit as well as Carbon for the diffing algorithm.<br></li>
</ul>

<hr>
<h2 id='license' class='heading'>License</h2>

<p>Carbon is released under the <a href="https://github.com/ra1028/Carbon/blob/master/LICENSE">Apache 2.0 License</a>.  </p>

<hr>

<p><img src="https://raw.githubusercontent.com/ra1028/Carbon/master/assets/logo/png/logo_carbon_bnr1_white.png" alt="Carbon Logo"></p>

          </div>
        </section>


      </article>
    </div>
    <section class="footer">
      <p>&copy; 2019 <a class="link" href="https://github.com/ra1028" target="_blank" rel="external">Ryo Aoyama</a>. All rights reserved. (Last updated: 2019-10-29)</p>
      <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.10.0</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external">Realm</a> project.</p>
    </section>
  </body>
</div>
</html>
